<template>
  <HomeTop />
  <HomeSales />

  <el-row :gutter="20">
    <el-col :xs="24" :md="12">
      <SearchKeyword />
    </el-col>

    <el-col :xs="24" :md="12">
      <CategoryRank />
    </el-col>
  </el-row>

  <HomeMap />

  <ChinaChart />
</template>

<script lang="ts">
export default {
  name: "Home",
};
</script>
<script lang="ts" setup>
import HomeTop from "./components/HomeTop.vue";
import HomeSales from "./components/HomeSales.vue";

import SearchKeyword from "./components/SearchKeyword.vue";
import CategoryRank from "./components/CategoryRank.vue";
import HomeMap from "./components/HomeMap.vue";
import ChinaChart from "./components/ChinaChart.vue";
</script>

<style scoped>
.today-sales {
  display: flex;
  align-items: center;
  font-size: 12px;
  margin: 5px 0;
}
.today-sales-icon {
  margin-left: 5px;
}

.user-wrap {
  display: flex;
}

.user-wrap .today-sales {
  font-size: 12px;
  margin: 0;
}
</style>
